<template>
	<div>
		<div class="main c-l-b">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<div class="main-border m-b-border p-12 m-b-c width-102 p-32">
				<div class="disFlex flex-wrap m-b-c width-102">
					<div v-for="(item, index) in randomData" :key="index" class="c-l-b-t disFlex-column" @click="itemBtn(item)">
						<div
							class="c-l-b-t-t"
							:style="{
								background: item.roomStatus == 1 ? '#027DB4' : item.roomStatus == 4 ? '#027db4' : '#7f7f7f'
							}"
						>
							{{ item.roomStatus == 1 ? '已入住' : '空房' }}
						</div>
						<div class="c-l-b-t-b">{{ item.roomNo }}</div>
					</div>
				</div>
				<div class="c-footer">
					<div class="disFlexItem m-r-20">
						<div class="blue m-r-12"></div>
						<div class="tit">入住中（{{ occupiedCount }}）</div>
					</div>
					<div class="disFlexItem">
						<div class="gray m-r-12"></div>
						<div class="tit">空房（{{ vacantCount }}）</div>
					</div>
				</div>
			</div>
		</div>
		<diaolog v-if="diaologStatus" :diaologStatus="diaologStatus" @diaologCencel="diaologCencel" />
	</div>
</template>

<script>
import diaolog from './diaolog.vue';
import { getroomStatusList } from '../src/api/centers';
import { getRoomCust } from '../src/api/rights';

import { beijingdatas, shenzhen, jinandata } from '../src/utils/json1';
import EventBus from './bustJson';
export default {
	mounted() {
		this.getFormattedDate = this.$getFormattedDate();

		// this.getmstRoomContrasts();
		// this.getorgslists();
		// this.beijingdata = this.changedata(beijingdatas);

		// 订阅 indexHsAll 变化的事件
		EventBus.$on('indexHsAllChanged', this.handleIndexHsAllChanged);
		this.handleIndexHsAllChanged(101539);
		// this.randomData =  ;
	},
	components: {
		diaolog
	},

	data() {
		return {
			getFormattedDate: '',
			diaologStatus: false,
			randomData: [],
			beijingdata: [],
			indexHsAll: 0,
			occupiedCount: 0,
			vacantCount: 0
		};
	},
	methods: {
		// countOccupancyStatus(data) {
		//   let occupiedCount = 0;
		//   let vacantCount = 0;

		//   for (const item of data) {
		//     if (item.status === "已入住") {
		//       occupiedCount++;
		//     } else if (item.status === "空房") {
		//       vacantCount++;
		//     }
		//   }

		//   return { occupiedCount, vacantCount };
		// },
		async getRoomCusts(roomId, state) {
			if (state != 1)
				return this.$message({
					message: '暂无信息',
					type: 'warning'
				});
			let data = {
				roomId
			};
			let res = await getRoomCust(data);
			// console.log('resresres', res);

			let dataObj = {
				roomids: roomId,
				custId: res.data.data.custId,
				date: res.data.data.date,
				status: res.data.data.status
			};

			this.$store.commit('saveRealTime', dataObj);

			this.diaologStatus = true;
		},
		async getmstRoomLists(orgId) {
			let data = {
				orgId
			};
			let res = await getroomStatusList(data);
			this.randomData = res.data.data;

			for (let i = 0; i < this.randomData.length; i++) {
				if (this.randomData[i].roomStatus == 1) {
					this.occupiedCount++;
				} else if (this.randomData[i].roomStatus != 1 || this.randomData[i].roomStatus == null) {
					this.vacantCount++;
				}
			}
		},
		handleIndexHsAllChanged(newIndexHsAll) {
			this.occupiedCount = 0;
			this.vacantCount = 0;
			this.getmstRoomLists(newIndexHsAll);

			// 在事件处理程序中更新组件的数据或执行其他操作
			// this.indexHsAll = newIndexHsAll;
			// let data1 = this.changedata(beijingdatas);
			// let data2 = this.changedata(shenzhen);
			// let data3 = this.changedata(jinandata);
			// if (newIndexHsAll == 0) {
			//   this.randomData = data2;
			// } else if (newIndexHsAll == 1) {
			//   this.randomData = data1;
			// } else if (newIndexHsAll == 3) {
			//   this.randomData = data3;
			// } else {
			//   this.randomData = data3;
			// }

			// this.occupiedCount = this.countOccupancyStatus(
			//   this.randomData
			// ).occupiedCount;
			// this.vacantCount = this.countOccupancyStatus(this.randomData).vacantCount;
		},
		// 抓换
		// changedata(data) {
		//   const statusMapping = {
		//     0: "空房",
		//     1: "已入住",
		//   };

		//   const randomData = [];

		//   data.forEach((floorData) => {
		//     floorData.roomList.forEach((room) => {
		//       randomData.push({
		//         id: randomData.length + 1,
		//         roomNumber: room.room_no,
		//         status: statusMapping[room.status],
		//       });
		//     });
		//   });

		//   return randomData;
		// },
		async getorgslists() {
			let res = await getorgslist();

			if (res.data.code == 200) {
			}
		},
		async getmstRoomContrasts() {
			let res = await getmstRoomContrast();

			if (res.data.code == 200) {
			}
		},

		itemBtn(item) {
			//

			let roomId = item.roomId;
			this.getRoomCusts(roomId, item.roomStatus);
			// return;
		},
		diaologCencel(v) {
			this.diaologStatus = false;
		}
	}
};
</script>

<style scoped>
.main {
	position: relative;
	border: 1px solid #192856;
	padding: 12px;
	box-sizing: border-box;
}

.c-l-b,
.c-l-t {
	height: 100%;
}

.disFlex {
	display: flex;
}

.flex-wrap {
	flex-wrap: wrap;
	overflow: auto;
	height: 250px;
}

.c-footer {
	display: flex;
	align-items: center;
	justify-content: center;
}

.width-102 {
	min-width: 750px;
}

.tit {
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	flex-shrink: 0;
}

.main .main-border {
	border: 1px solid #202d56;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.m-b-border {
	border: 1px solid #797979 !important;
}

.p-12 {
	padding: 0 12px;
}

.m-b-c {
	box-sizing: border-box;
	position: relative;
}

.width-102 {
	min-width: 750px;
}

.p-32 {
	padding-right: 0px;
}

.c-l-b-t {
	width: 104px;
	height: 60px;
	border: 1px solid #797979;
	margin: 10px 0 14px 22px;
}

.disFlex-column {
	display: flex;
	flex-direction: column;
}

.disFlexItem {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.c-l-b-t-t {
	height: 70%;
	text-align: center;
	line-height: 40px;
	color: #fff;
	cursor: pointer;
}

.m-r-20 {
	margin-right: 20px;
}

.m-r-12 {
	margin-right: 12px;
}

.blue {
	background: #027db4;
	width: 40px;
	height: 20px;
}

.gray {
	background: #7f7f7f;
	width: 40px;
	height: 20px;
}

.main span:nth-child(1) {
	position: absolute;
	left: -1px;
	top: -1px;
	padding: 10px;
	border-style: solid;
	border-color: #00c7d6;
	border-width: 2px 0 0 2px;
}

.main span:nth-child(2) {
	position: absolute;
	right: -1px;
	top: -1px;
	padding: 10px;
	border-style: solid;
	border-color: #00c7d6;
	border-width: 2px 2px 0 0;
}

.main span:nth-child(3) {
	position: absolute;
	right: -1px;
	bottom: -1px;
	padding: 10px;
	border-style: solid;
	border-color: #00c7d6;
	border-width: 0 2px 2px 0;
}

.main span:nth-child(4) {
	position: absolute;
	left: -1px;
	bottom: -1px;
	padding: 10px;
	border-style: solid;
	border-color: #00c7d6;
	border-width: 0 0 2px 2px;
}

.c-l-b-t-b {
	white-space: nowrap;
	color: white;
	text-align: center;
	font-size: 14px;
}
</style>
